<template>
  <div>
    <n-card :bordered="false" class="fromCard">
      <BasicForm
        @register="register"
        :Toption="userStatus"
        @submit="handleSubmit"
        @reset="handleReset"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="tableCard">
      <BasicTable
        :bordered="false"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        ref="actionRef"
        :actionColumn="actionColumn"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <n-button type="primary" @click="addInfo" :disabled="!authority.includes('operator_add')">
            <template #icon>
              <n-icon>
                <PlusOutlined />
              </n-icon>
            </template>
            新建
          </n-button>
        </template>
      </BasicTable>
    </n-card>
    <!-- 添加操作 -->
    <n-modal :show="addModal">
      <n-card style="width: 1000px" title="新增操作" size="huge" :bordered="false">
        <n-form
          :label-width="80"
          :model="addOperation"
          :rules="rules"
          size="medium"
          ref="formRef"
          label-placement="left"
          label-align="left"
        >
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作名称" path="name">
                <n-input placeholder="请输入操作名称" v-model:value="addOperation.name" maxlength="50"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="英文名称" path="nameEn">
                <n-input placeholder="英文名称" v-model:value="addOperation.nameEn" maxlength="50"/>
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作代码" path="code">
                <n-input placeholder="请输入操作代码" v-model:value="addOperation.code" maxlength="64"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="服务标志" path="stdSvcInd">
                <n-input placeholder="请输入标准服务标志" v-model:value="addOperation.stdSvcInd" maxlength="64"/>
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="接口方法" path="stdIntfInd">
                <n-input placeholder="请输入标准接口方法" v-model:value="addOperation.stdIntfInd" maxlength="64"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="所属菜单" path="menuId">
                <!-- <n-input placeholder="请输入标准接口方法" v-model:value="addOperation.menuId" /> -->
                <n-tree-select
                  :options="menuIdOptions"
                  clearable
                  v-model:value="addOperation.menuId"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="权限检查" path="privilegess">
                <n-select
                  placeholder="是否权限检查"
                  :options="privilegessOptions"
                  v-model:value="addOperation.privilegess"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="登录检查" path="loginAble">
                <n-select
                  placeholder="是否登录检查"
                  :options="loginAbleOptions"
                  v-model:value="addOperation.loginAble"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="记录日志" path="logAble">
                <n-select
                  placeholder="是否记录日志"
                  :options="logAbleOptions"
                  v-model:value="addOperation.logAble"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="状态" path="status">
                <n-select
                  placeholder="状态"
                  :options="statusOptions"
                  v-model:value="addOperation.status"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作描述" path="description">
                <n-input placeholder="请输入操作描述" v-model:value="addOperation.description" maxlength="255"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1"> </n-gi>
          </n-grid>
        </n-form>
        <template #action>
          <n-space justify="end">
            <n-button type="info" :loading="formBtnLoading" @click="addFrom">确定</n-button>
            <n-button @click="() => (addModal = false)">取消</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
    <!-- 编辑操作 -->
    <n-modal :show="editModal">
      <n-card style="width: 1000px" title="编辑操作" size="huge" :bordered="false">
        <n-form
          :label-width="80"
          size="medium"
          ref="formRef"
          label-placement="left"
          label-align="left"
          :model="updateOperation"
        >
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作名称" path="name">
                <n-input placeholder="请输入操作名称" v-model:value="updateOperation.name" maxlength="50"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="操作id" path="nameEn">
                <n-input placeholder="请输入操作id" v-model:value="updateOperation.operatorId" disabled/>
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="英文名称" path="nameEn">
                <n-input placeholder="英文名称" v-model:value="updateOperation.nameEn" maxlength="50"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="操作代码" path="code">
                <n-input placeholder="请输入操作代码" v-model:value="updateOperation.code" maxlength="30"/>
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="服务标志" path="stdSvcInd">
                <n-input
                  placeholder="请输入标准服务标志"
                  v-model:value="updateOperation.stdSvcInd"
                  maxlength="64"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="接口方法" path="stdIntfInd">
                <n-input
                  placeholder="请输入标准接口方法"
                  v-model:value="updateOperation.stdIntfInd"
                  maxlength="64"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item label="所属菜单" path="menuId">
                <n-tree-select
                  :options="menuIdOptions"
                  clearable
                  v-model:value="updateOperation.menuId"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="权限检查" path="privilegess">
                <n-select
                  placeholder="是否权限检查"
                  :options="privilegessOptions"
                  v-model:value="updateOperation.privilegess"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="登录检查" path="loginAble">
                <n-select
                  placeholder="是否登录检查"
                  :options="loginAbleOptions"
                  v-model:value="updateOperation.loginAble"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="记录日志" path="logAble">
                <n-select
                  placeholder="是否记录日志"
                  :options="logAbleOptions"
                  v-model:value="updateOperation.logAble"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="状态" path="status">
                <n-select
                  placeholder="状态"
                  :options="statusOptions"
                  v-model:value="updateOperation.status"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="操作描述" path="description">
                <n-input placeholder="请输入操作描述" v-model:value="updateOperation.description" maxlength="255"/>
              </n-form-item>
            </n-gi>
            <n-gi span="1"> </n-gi>
          </n-grid>
        </n-form>
        <template #action>
          <n-space justify="end">
            <n-button
              type="info"
              :loading="formBtnLoading"
              @click="editFrom"
              style="background-color: #2d8cf0; color: #fff"
              >确定</n-button
            >
            <n-button @click="() => (editModal = false)">取消</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
    <!-- 查看操作 -->
    <n-modal :show="viewModal">
      <n-card style="width: 1000px" title="详情" size="huge" :bordered="false">
        <n-form
          :model="viewOpInfo"
          :label-width="80"
          size="medium"
          ref="formRef"
          label-placement="left"
          label-align="left"
        >
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作名称" path="name">
                <n-input placeholder="请输入操作名称" disabled v-model:value="viewOpInfo.name" />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="英文名称" path="nameEn">
                <n-input placeholder="英文名称" disabled v-model:value="viewOpInfo.nameEn" />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作代码" path="code">
                <n-input placeholder="请输入操作代码" disabled v-model:value="viewOpInfo.code" />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="服务标志" path="stdSvcInd">
                <n-input
                  placeholder="请输入标准服务标志"
                  disabled
                  v-model:value="viewOpInfo.stdSvcInd"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="接口方法" path="stdIntfInd">
                <n-input
                  placeholder="请输入标准接口方法"
                  disabled
                  v-model:value="viewOpInfo.stdIntfInd"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item label="所属菜单" path="menuId">
                <!-- <n-input placeholder="请输入标准接口方法" v-model:value="viewOpInfo.menuId" /> -->
                <n-tree-select
                  :options="menuIdOptions"
                  clearable
                  v-model:value="viewOpInfo.menuId"
                  disabled
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="权限检查" path="privilegess">
                <n-select
                  placeholder="是否权限检查"
                  :options="privilegessOptions"
                  v-model:value="viewOpInfo.privilegess"
                  disabled
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="登录检查" path="loginAble">
                <n-select
                  placeholder="是否登录检查"
                  :options="loginAbleOptions"
                  v-model:value="viewOpInfo.loginAble"
                  disabled
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="记录日志" path="logAble">
                <n-select
                  placeholder="是否记录日志"
                  :options="logAbleOptions"
                  v-model:value="viewOpInfo.logAble"
                  disabled
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1">
              <n-form-item :span="1" label="状态" path="status">
                <n-select
                  placeholder="状态"
                  :options="statusOptions"
                  v-model:value="viewOpInfo.status"
                  disabled
                />
              </n-form-item>
            </n-gi>
          </n-grid>
          <n-grid :cols="2" :x-gap="28" style="margin-bottom: 20px">
            <n-gi span="1">
              <n-form-item :span="1" label="操作描述" path="description">
                <n-input
                  placeholder="请输入操作描述"
                  disabled
                  v-model:value="viewOpInfo.description"
                />
              </n-form-item>
            </n-gi>
            <n-gi span="1"> </n-gi>
          </n-grid>
        </n-form>
        <template #action>
          <n-space justify="end">
            <n-button
              @click="() => (viewModal = false)"
              style="background-color: #2d8cf0; color: #fff"
              >确认</n-button
            >
          </n-space>
        </template>
      </n-card>
    </n-modal>
    <!-- 删除操作 -->
    <n-modal
      v-model:show="delModal"
      :mask-closable="false"
      preset="dialog"
      title="确认"
      @positive-click="deletConfirm"
      @negative-click="deletCancel"
    >
      <h3 style="font-size: 15px; margin-top: 10px; margin-bottom: 10px">你确定要删除这条信息吗</h3>
      <n-space justify="end">
        <n-button @click="deletConfirm" style="background-color: #2d8cf0; color: #fff"
          >确认</n-button
        >
        <n-button @click="deletCancel">取消</n-button>
      </n-space>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';
import { defineComponent, h, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getTableList } from '@/api/table/list';
import { columns } from './cloumns';
import { PlusOutlined, EyeOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import { getRoleOperationList } from '@/api/operation/roleOperatorLIst';
import { getOperationList } from '@/api/operation/list';
import { addOperationInfo } from '@/api/operation/add';
import { viewOperatorInfo } from '@/api/operation/view';
import { updateOperationInfo } from '@/api/operation/update';
import { deleteOperationInfo } from '@/api/operation/delete';
import { findMenuByUserId } from '@/api/menu/findMenuByUserId';
import getTreeSelet from '../../../utils/getTreeSelet';
import formatDate from '@/utils/timestamp';
import { createStorage } from '@/utils/Storage';
const Storage = createStorage({ storage: localStorage });

let authorityJson = Storage.get('OPERATORLIST');
const authority = JSON.parse(authorityJson);

// 表单查询按钮
function handleSubmit(values: Recordable) {
  reloadTable();
}

// 表单重置按钮
function handleReset(values: Recordable) {
  cloumnsListParm.value.name = '';
  cloumnsListParm.value.nameEn = '';
  cloumnsListParm.value.stdSvcInd = '';
  cloumnsListParm.value.stdIntfInd = '';
  reloadTable();
}

const cloumnsListParm = ref({
  name: '',
  nameEn: '',
  stdSvcInd: '',
  stdIntfInd: '',
  pageNum: 1,
  pageSize: 10,
});

// 全体操作列表
const loadDataTable = async (res) => {
  cloumnsListParm.value.pageNum = res.page;
  cloumnsListParm.value.pageSize = res.pageSize;
  console.log(res);
  let data = await getOperationList(cloumnsListParm.value);
  let datas = {
    list: data.data.body.list,
    page: res.page,
    pageSize: res.pageSize,
    pageCount: Math.ceil(data.data.body.total / res.pageSize),
  };
  console.log(data);
  console.log(datas);
  return datas;
};

const userStatus = [
  {
    label: '全部状态',
    key: '全部状态',
  },
  {
    label: '已批准',
    key: '已批准',
  },
  {
    label: '已拒绝',
    key: '已拒绝',
  },
  {
    label: '未处理',
    key: '未处理',
  },
];

// handleUpdateValue
function handleUpdateValue(...args) {
  console.log(...args);
}

// 权限检查
const privilegessOptions = [
  {
    value: 0,
    label: '是',
  },
  {
    value: 1,
    label: '否',
  },
];

// 登录检查
const loginAbleOptions = [
  {
    value: 0,
    label: '是',
  },
  {
    value: 1,
    label: '否',
  },
];

// 记录日志
const logAbleOptions = [
  {
    value: 0,
    label: '是',
  },
  {
    value: 1,
    label: '否',
  },
];

// 状态
const statusOptions = [
  {
    value: 0,
    label: '启用',
  },
  {
    value: 1,
    label: '禁用',
  },
];
// 表单输入框和表单验证
const schemas = [
  {
    field: 'name',
    component: 'NInput',
    label: '操作名称：',
    componentProps: {
      maxlength: '50',
      placeholder: '请输入操作名称',
      onInput: (e: any) => {
        cloumnsListParm.value.name = e;
        console.log(e);
      },
    },
  },
  {
    field: 'nameEn',
    component: 'NInput',
    label: '操作英文名：',
    componentProps: {
      maxlength: '50',
      placeholder: '请输入操作英文名称：',
      onInput: (e: any) => {
        cloumnsListParm.value.nameEn = e;
        console.log(e);
      },
    },
  },
  {
    field: 'stdSvcInd',
    component: 'NInput',
    label: '标准服务标识：',
    componentProps: {
      maxlength: '64',
      placeholder: '请输入标准服务标识：',
      onInput: (e: any) => {
        cloumnsListParm.value.stdSvcInd = e;
        console.log(e);
      },
    },
  },
  {
    field: 'stdIntfInd',
    component: 'NInput',
    label: '标准接口方法：',
    componentProps: {
      maxlength: '64',
      placeholder: '请输入标准接口方法：',
      onInput: (e: any) => {
        cloumnsListParm.value.stdIntfInd = e;
        console.log(e);
      },
    },
  },
];

const viewModal = ref(false);
const editModal = ref(false);
const router = useRouter();
const addModal = ref(false);
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const name = ref();
const roleState = ref();
const delModal = ref(false);

// 列表行为
const actionColumn = reactive({
  width: 220,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: '编辑',
          icon: 'PlusOutlined',
          text: true,
          color: '#2d8cf0',
          onClick: editInfo.bind(null, record),
          ifShow: () => {
            return authority.includes('operator_view');
          },
        },
        {
          label: '查看',
          text: true,
          color: '#2d8cf0',
          onClick: viewInfo.bind(null, record),
          ifShow: () => {
            return authority.includes('operator_view');
          },
        },
        {
          label: '删除',
          text: true,
          color: '#ff4646',
          onClick: deletInfo.bind(null, record),
          ifShow: () => {
            return authority.includes('operator_view');
          },
        },
      ],
      select: (key) => {
        message.info(`您点击了，${key} 按钮`);
      },
    });
  },
});

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});

// 添加角色信息
const menuIdOptions = ref();
let userId = Storage.get('userId');
async function addInfo(record: Recordable) {
  let data = await findMenuByUserId({ userId });
  console.log(data);
  menuIdOptions.value = getTreeSelet(data.data.body.menuDto.children);
  console.log(menuIdOptions);
  addModal.value = true;
  message.info('点击了添加');
}

// 添加角色变为响应式
const addOperation = ref({
  name: '',
  nameEn: '',
  code: '',
  stdSvcInd: '',
  stdIntfInd: '',
  menuId: '',
  privilegess: '',
  loginAble: '',
  logAble: '',
  status: '',
  description: '',
});

// 添加操作表单验证规则
const rules = {
  name: {
    required: true,
    validator(rule, value) {
      if (!value) {
        return new Error('请输入操作名称');
      } else {
        return true;
      }
    },
    message: '请输入操作名称',
    trigger: 'blur',
  },
  nameEn: {
    required: true,
    message: '请输入操作英文名',
    trigger: 'blur',
  },
  code: {
    required: true,
    message: '请输入操作代码',
    trigger: 'blur',
  },
  stdSvcInd: {
    required: true,
    message: '请输入标准服务标志',
    trigger: 'blur',
  },
  stdIntfInd: {
    required: true,
    message: '请输入标准接口方法',
    trigger: 'blur',
  },
};

// 确认按钮
const addFrom = async (e) => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      console.log(addOperation.value);
      const operationData = await addOperationInfo(addOperation.value).then((res) => {
        console.log(res);
        message.success('添加成功');
        addOperation.value.name = '';
        addOperation.value.nameEn = '';
        addOperation.value.description = '';
        addOperation.value.code = '';
        addOperation.value.stdSvcInd = '';
        addOperation.value.stdIntfInd = '';
        addOperation.value.menuId = '';
        addOperation.value.privilegess = '';
        addOperation.value.loginAble = '';
        addOperation.value.logAble = '';
        addOperation.value.status = '';
        reloadTable();
      });
      addModal.value = false;
    } else {
      message.error('添加失败');
    }
  });
};

// 编辑角色变为响应式
const updateOperation = ref({
  operatorId: '',
  name: '',
  nameEn: '',
  code: '',
  stdSvcInd: '',
  stdIntfInd: '',
  menuId: '',
  privilegess: '',
  loginAble: '',
  logAble: '',
  status: '',
  description: '',
});

// 编辑操作信息
async function editInfo(record: Recordable) {
  console.log(record.operatorId);
  let operatorId = record.operatorId;
  let data = await viewOperatorInfo({ operatorId });
  console.log(data);
  //  菜单

  let userId = Storage.get('userId');
  let dataa = await findMenuByUserId({ userId });
  console.log(dataa);
  menuIdOptions.value = getTreeSelet(dataa.data.body.menuDto.children);
  updateOperation.value = data.data.body;
  if (updateOperation.value.loginAble == 'Y') {
    updateOperation.value.loginAble = '是';
  } else {
    updateOperation.value.loginAble = '否';
  }
  if (updateOperation.value.privilegess == 'Y') {
    updateOperation.value.privilegess = '是';
  } else {
    updateOperation.value.privilegess = '否';
  }
  if (updateOperation.value.status == '0') {
    updateOperation.value.status = '可用';
  } else {
    updateOperation.value.status = '禁用';
  }
  message.info('点击了编辑');
  editModal.value = true;
}

// 编辑确认按钮
async function editFrom() {
  if (updateOperation.value.loginAble == '是') {
    updateOperation.value.loginAble = 'Y';
  }
  if (updateOperation.value.loginAble == '否') {
    updateOperation.value.loginAble = 'N';
  }
  if (updateOperation.value.privilegess == '是') {
    updateOperation.value.privilegess = 'Y';
  }
  if (updateOperation.value.privilegess == '否') {
    updateOperation.value.privilegess = 'N';
  }
  if (updateOperation.value.status == '可用') {
    updateOperation.value.status = '0';
  }
  if (updateOperation.value.status == '禁用') {
    updateOperation.value.status = '1';
  }
  const data = await updateOperationInfo(updateOperation.value).then((res) => {
    console.log(res);
    message.success('添加成功');
    reloadTable();
    editModal.value = false;
  });
}

// 查看操作信息
const viewOpInfo = ref({});
async function viewInfo(record: Recordable) {
  console.log(record.operatorId);
  let operatorId = record.operatorId;
  let data = await viewOperatorInfo({ operatorId });
  console.log(data);
  viewOpInfo.value = data.data.body;
  if (viewOpInfo.value.loginAble == 'Y') {
    viewOpInfo.value.loginAble = '是';
  } else {
    viewOpInfo.value.loginAble = '否';
  }
  if (viewOpInfo.value.privilegess == 'Y') {
    viewOpInfo.value.privilegess = '是';
  } else {
    viewOpInfo.value.privilegess = '否';
  }
  if (viewOpInfo.value.status == '0') {
    viewOpInfo.value.status = '可用';
  } else {
    viewOpInfo.value.status = '禁用';
  }
  message.info('点击了查看');
  viewModal.value = true;
}

// 删除操作
function deletInfo(record: Recordable) {
  console.log('点击了删除', record);
  localStorage.setItem('record', JSON.stringify(record));
  message.info('点击了删除');
  delModal.value = true;
}

// 确认删除
async function deletConfirm() {
  const deleteOperator = JSON.parse(localStorage.getItem('record'));
  console.log(deleteOperator);
  let { operatorId } = deleteOperator;
  let data = await deleteOperationInfo({ operatorId });
  console.log(data);
  message.success('删除成功');
  delModal.value = false;
  reloadTable();
}

// 取消删除
function deletCancel() {
  message.success('未删除');
  delModal.value = false;
}

function reloadTable() {
  actionRef.value.reload();
}
</script>

<style lang="less" scoped>
.fromCard {
  margin-top: 12px;
  border: 1px solid rgb(226, 229, 229);
  margin-bottom: 8px;
}
.tableCard {
  border: 1px solid rgb(226, 229, 229);
}
</style>

      function v(v: any) {
        throw new Error('Function not implemented.');
      }
